<script lang="ts" setup>
import {  reactive, computed, onMounted, inject } from 'vue';
import { UserOutlined, LockOutlined } from '@ant-design/icons-vue';
import { useRouter } from 'vue-router';
import {userService} from "../../api/user";
import { message } from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';

const router=useRouter();
interface LoginForm {
  jobNumber: string;
  password: string;
}
const LoginForm = reactive<LoginForm>({
  jobNumber: '',
  password: '',
});
const disabled = computed(() => {
  return !(LoginForm.jobNumber && LoginForm.password);
});

const handle_login = async () => {
  const response = await userService.login(LoginForm)
   if (response.data.code==200){
    message.success(response.data.msg)
    //console.log(response.data.data);
    let user=JSON.stringify(response.data.data)
    localStorage.setItem('user',user)
    await router.replace({
      path: "/"
    })
   }
   else{
    message.error(response.data.msg)
   }
}
//  获取这么获取
//  let userJSON=localStorage.getItem("user")
//  //@ts-ignore
//   let userobj=JSON.parse(userJSON)
// userobj.id  userobj.......ok   
</script>

<template>
  <a-layout class="main">
    <a-form
    name="normal_login"
    class="login-form"
    :model="LoginForm"
    >
    <h2 style="text-shadow:2px 2px rgb(24 144 255 / 45%);color:rgba(0, 0, 0, 0.85);">云电子胶片系统</h2>
    <a-form-item
      label=""
      name="jobNumber"
      :rules="[{ required: true, message: '请输入你的账号' }]"
    >
      <a-input v-model:value="LoginForm.jobNumber" placeholder="请输入工号" size="large">
        <template #prefix>
          <UserOutlined class="site-form-item-icon" />
        </template>
      </a-input>
    </a-form-item>

    <a-form-item
      label=""
      name="password"
      :rules="[{ required: true, message: '请输入你的密码' }]"
    >
      <a-input-password v-model:value="LoginForm.password" placeholder="请输入密码" size="large">
        <template #prefix>
          <LockOutlined class="site-form-item-icon" />
        </template>
      </a-input-password>
    </a-form-item>
      <a-button :disabled="disabled" type="primary" html-type="submit" class="login-form-button" @click="handle_login()" size="large">
        登 录
      </a-button>
    </a-form>

    <a-form name="LoginBack" class="LoginBack">
    </a-form>
  </a-layout>
</template>

<style>
.login-form {
  /* 这里改颜色登录卡片 */
  background-color:#ffffff;
  opacity: 1.0;
  padding: 30px;
  /*宽度和高度*/
  width: 380px;
  height: 350px;
  position: absolute;
  right: 15%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  z-index: 2;
  border: 1px solid #1890ff;
}
.LoginBack{
  height: 80%;
  width: 60%;
  background-image: url("src/assets/LoginBack.png");
  /* background-size:100% 100%; */
  background-size:cover;
  position: absolute;
  left: 10%;
  z-index: 1;
}
#components-form-demo-normal-login .login-form-forgot {
  float: right;
}
.login-form-button {
  width: 100%;
}
.ant-form-item-control-input-content{
  display: flex;
}
.main{
  align-items: center;
  justify-content: center;
  background-color: #ffffff;
  /*background-image: url("src/assets/LoginBack.png");
  background-size:100% 100%;
  background-attachment:fixed;*/
}
</style>